<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Carousel</title>
  <style>
    .container{
      max-width: 800px;
      padding: 20px;
      margin: 30px auto 0;
      border-radius: 4px;
      box-shadow: 0 0 4px 0 rgba(0, 0, 0, .3);
    }
    @media screen and (max-width: 600px){
      .container{
        padding: 10px;
      }
      h2{
        margin: 10px 0;
      }
    }
    .carousel{
     position: relative;
     overflow: hidden;
     margin-top: 20px;
    }
    .carousel .panels{
      height: 400px;
    }
    @media screen and (max-width: 600px){
      .carousel .panels{
        height: 25vh;
      }
      
    }
    .carousel .panels > a{
      width: 100%;
      height: 100%;
      position: absolute;
      text-decoration: none;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .carousel .panels > a img{
      width: 100%;
      height: auto;
      -webkit-user-select: none;
    }
    /* .carousel .panels > a.active{
      z-index: 1;
    } */
    .carousel .panels > a:nth-child(2n){
      background-color: pink;
    }
    .carousel .panels > a:nth-child(2n+1){
      background-color: lightskyblue;
    }
    .carousel .arrow{
      width: 30px;
      height: 30px;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      /* background-color:#c0c4cc; */
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      opacity: 0;
      transition: all .3s;
      z-index: 100;
    }
    .carousel:hover .arrow-pre{
      opacity: 1;
      transform: translateX(10px) translateY(-50%);
    }
    .carousel:hover .arrow-next{
      opacity: 1;
      transform: translateX(-10px) translateY(-50%);
    }
    .carousel .arrow::before{
      content: '';
      display: block;
      width: 10px;
      height: 10px;
      border-left: 2px solid #fff;
      border-top: 2px solid #fff;
    }
    .carousel .arrow-pre{
      left: 0;
    }
    .carousel .arrow-next{
      right: 0;
    }
    .carousel .arrow-pre::before{
      transform: rotate(-45deg);
    }
    .carousel .arrow-next::before{
      transform: rotate(135deg);
    }
    .carousel .indicators{
      position: absolute;
      left: 50%;
      bottom: 10px;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 100;
    }
    .carousel .indicators span{
      padding: 8px 0;
      cursor: pointer;
      
    }
    .carousel .indicators span::before{
      content: "";
      width: 30px;
      height: 3px;
      margin-left: 4px;
      border-radius: 4px;
      display: block;
      background-color: #c0c4cc;
    }
    .carousel .indicators span.active::before{
      background-color: #fff;
    }
    .pages{
      max-width: 800px;
      padding: 20px;
      margin: 30px auto 0;
      border-radius: 4px;
      box-shadow: 0 0 4px 0 rgba(0, 0, 0, .3);
    }
    @media screen and (min-width: 600px){
      .pages{
        display: flex;
        justify-content:space-between;
      }
    }

    @media screen and (max-width: 600px){
      .pages{
        display: flex;
        flex-direction: column;
      }
      .pages div:first-child{
        padding-bottom: 6px;
      }
    }
    .pages a{
      text-decoration: none;
    }
  </style>
</head>
<body>
  <div class="container pages">
    <div>上一个:<a href="../tooltip/tooltip.html">tooltip（文字提示）</a></div>
    <div>下一个:<a href="../Collapse/Collapse.html">Collapse（折叠面板）</a></div>
  </div>
  <div class="container">
    <h2>Carousel</h2>
    <div>
      <select id="animation-select">
        <option value="slide">slide</option>
        <option value="appear">appear</option>
        <option value="zoom">zoom</option>
      </select>
    </div>
    <div class="carousel">
      <div class="panels">
        <a href="#0" style="z-index: 10;"><img src="image/timg1.jpg" alt=""></a>
        <a href="#1"><img src="image/timg2.jpg" alt=""></a>
        <a href="#2"><img src="image/timg3.jpg" alt=""></a>
        <a href="#3"><img src="image/timg4.jpg" alt=""></a>
      </div>
      <div class="arrows">
        <div class="arrow arrow-pre"></div>
        <div class="arrow arrow-next"></div>
      </div>
      <div class="indicators">
        <span class="active"></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
  </div>



  <script>
    const css = ($node, objcss) => Object.assign($node.style, objcss)
    const Animation = {
      slide($from, $to, direction){
        $from.style = ''
        $to.style = ''
        // console.log('slide', arguments)
        css($from, {
          transform:`translateX(0)`,
          zIndex:10
        })
        css($to, {
          transform:`translateX(${direction === 'right'? '':'-'}100%)`,
          zIndex:10
        })
        setTimeout(() => {
        css($from, {
          transform:`translateX(${direction === 'right'? '-':''}100%)`,
          transition:`all .3s`
        })
        css($to, {
          transform:`translateX(0)`,
          transition:`all .3s`
        })
        })
      },
      zoom($from, $to, direction){
        $from.style = ''
        $to.style = ''
        // console.log('zoom', arguments)
        css($from, {
          transform:`scale(1)`,
          zIndex:10
        })
        css($to, {
          transform:`scale(10)`,
          zIndex:9
        })
        setTimeout(() => {
        css($from, {
          transform:`scale(1)`,
          transition:`all .3s`,
          zIndex:9
        })
        css($to, {
          transform:`scale(1)`,
          transition:`all .3s`,
          zIndex:10
        })
        })
      },
      appear($from, $to, direction){
        $from.style = ''
        $to.style = ''
        // console.log('zoom', arguments)
        css($from, {
          zIndex: 10,
          opacity: 1
        })
        css($to, {
          zIndex: 9,
          opacity: 0
        })
        setTimeout(() => {
        css($from, {
          transition:`all .5s`,
          opacity: 0,
          zIndex: 9,
        })
        css($to, {
          transition:`all .5s`,
          opacity: 1,
          zIndex: 10,
        })
        })
      },
    }
    class Carousel{
      constructor($root, animation){
        this.$root = $root
        this.$pre = $root.querySelector('.arrow-pre')
        this.$next = $root.querySelector('.arrow-next')
        this.$$panels = $root.querySelectorAll('.panels > a')
        this.$$indicators = $root.querySelectorAll('.indicators > span')
        this.animation = animation
        
        this.bind()
        this.setTime()
      }
      bind(){
        this.$pre.onclick = () => {
          let fromIndex = this.getIndex()
          let toIndex = this.getPreIndex()
          this.setPanel(fromIndex, toIndex, 'left')
          this.setIndicator(toIndex)
          clearInterval(this.time)
          this.setTime()
        }
        this.$next.onclick = () =>{
          let fromIndex = this.getIndex()
          let toIndex = this.getNextIndex()
          this.setPanel(fromIndex, toIndex, 'right')
          this.setIndicator(toIndex)
          clearInterval(this.time)
          this.setTime()
        }
        this.$$indicators.forEach($indicator => $indicator.onclick = (e) => {
          let fromIndex = this.getIndex()
          let toIndex = [...this.$$indicators].indexOf(e.target)
          let direction = fromIndex > toIndex ? 'left':'right'
          this.setIndicator(toIndex)
          this.setPanel(fromIndex, toIndex, direction)
          clearInterval(this.time)
          this.setTime()
        })
      }
      setTime(){
        this.time = setInterval(() => {
          let fromIndex = this.getIndex()
          let toIndex = this.getNextIndex()
          this.setPanel(fromIndex, toIndex, 'right')
          this.setIndicator(toIndex)
        }, 3000);
      }
      getIndex(){
        return [...this.$$indicators].indexOf(this.$root.querySelector('.indicators .active'))
      }
      getPreIndex(){
        return (this.getIndex() - 1 + this.$$indicators.length) % this.$$indicators.length
      }
      getNextIndex(){
        return (this.getIndex() + 1) % this.$$indicators.length
      }
      setPanel(fromIndex, toIndex, direction){
        this.animation(this.$$panels[fromIndex], this.$$panels[toIndex], direction)
      }
      setIndicator(index){
        this.$$indicators.forEach($indicator => $indicator.classList.remove('active'))
        this.$$indicators[index].classList.add('active')
      }
      setAnimation(animation){
        this.animation = animation
      }
      
    }
    let $carousel = document.querySelector('.carousel')
    let carousel = new Carousel($carousel, Animation.slide)

    document.querySelector('#animation-select').onchange = function() {
      carousel.setAnimation(Animation[this.value])
    }


   


  </script>
</body>
</html>